<template>
    <div>
        <div class="demo wh" :class="{ 'demo-select': isMore }">
            <!-- el-select组件 -->
            <el-select
                v-model="value5"
                ref="select"
                class="wh"
                @change="changeSelect"
                multiple
                placeholder="请选择"
            >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    class="demo-option wh"
                ></el-option>
            </el-select>
            <div v-if="isMore" class="demo-select-after">+{{ lala }}</div>
        </div>
    </div>
</template>

<script>
import { Select, Option } from "element-ui";

export default {
    data() {
        return {
            na: 0,
            cc: false,
            lala: 1,
            options: [
                // 选项列表
                { value: "选项1", label: "黄金糕" },
                { value: "选项2", label: "双皮奶" },
                { value: "选项3", label: "蚵仔煎" },
                { value: "选项4", label: "龙须面" },
                {
                    value: "选项5",
                    label: "北京烤鸭北京烤鸭北京烤鸭北京烤鸭北京烤鸭",
                },
            ],
            value5: [], // 选择框的值，初始化为空数组
        };
    },
    computed: {
        isMore() {
            if (this.$refs.select && this.$refs.select.$refs.tags) {
                const tags = Array.from(
                    this.$refs.select.$refs.tags.children[0].childNodes
                );
                const visibleTags = tags.filter(
                    (tag) => !tag.className.includes("leave")
                );
                const totalWidth = visibleTags.reduce(
                    (sum, tag) => sum + tag.offsetWidth,
                    0
                );
                if (totalWidth < 144) {
                    this.cc = false;
                    this.na = visibleTags.length;
                } else {
                    this.cccc = true;
                    this.lala = visibleTags.length - this.na;
                }
                return this.cc;
            }
            return this.cc;
        },
    },
    methods: {
        changeSelect() {
            this.$nextTick(() => {
                if (this.$refs.select && this.$refs.select.$refs.tags) {
                    const tags = Array.from(
                        this.$refs.select.$refs.tags.children[0].childNodes
                    );
                    const visibleTags = tags.filter(
                        (tag) => !tag.className.includes("leave")
                    );
                    const totalWidth = visibleTags.reduce(
                        (sum, tag) => sum + tag.offsetWidth,
                        0
                    );

                    if (totalWidth < 144) {
                        this.na = visibleTags.length;
                        this.cc = false;
                    } else {
                        console.log(this.isMore);
                        this.cc = true;
                        this.lala = visibleTags.length - this.na;
                        console.log(this.lala);
                    }
                }
            });
        },
    },
    components: {
        ElSelect: Select, // 注册el-select组件
        ElOption: Option, // 注册el-option组件
    },
};
</script>

<style lang="less" rel="stylesheet/less">
.demo .demo-select {
    width: 100px;
    height: 100px;
}
.demo-select {
    position: relative;
    .demo-select-after {
        content: "+";
        position: absolute;
        right: 39px;
        bottom: 5px;
        color: #000;
        font-weight: bold;
        font-size: 14px;
        z-index: 999;
        background-color: #fff;
        height: 100%;
    }
}
.wh {
    width: 100%;
    height: 100%;
}
.el-select__tags {
    min-width: 150px !important;
    height: 30px;
    overflow: hidden;
    white-space: nowrap;
    flex-wrap: nowrap;
    // background-image: url(../../assets/logo.png);
    background-size: 100%;
}
</style>
